<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>百度地图</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<style type="">
			html, body, #map_container {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}
			#map_container {
				width: 100%;
				height: 100%;
			}
			.anchorBL, .Bmap_cpyCtrl {
				display: none;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=mQnIhkcrCDE5ZVY0xIhpqi6w8BEINcx4"></script>
		<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
		<script src="https://mapv.baidu.com/build/mapv.js"></script>
		<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.27/dist/mapvgl.min.js"></script>
		<!-- 如果使用到Three.js相关的图层需要引用 -->
		<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.53/dist/mapvgl.threelayers.min.js"></script>



	</head>
	<body>
	    <div id="map_container"></div>
	    <script>

	    	var map = initBMap();
	    	var data = initData();
	    	setData(data, map);

	    	//初始化百度地图 common.js快速定义百度地图map对象
	    	function initBMap(){
	    		var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京');
	    		var map = initMap({
		    		tilt: 0,
		    		center: [cityCenter.lng, cityCenter.lat],
		    		zoom: 10,
		    		style: snowStyle
		    	})
		    	return map;
	    	}


    		// 准备数据源
	    	function initData(){
		    	var data = [];
		    	var random = 700;
		    	var cities = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
		    	while(random--){
		    		var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
		    		data.push({
			    		geometry: {
			    			type: 'Point',
			    			coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
			    		},
			    		properties: {
			    			sales: Math.random() * 100
			    		}
			    	});
		    	}

		    	//控制只展示大于50的数据
		    	data = data.filter( _ =>_.properties.sales > 50);
		    	return data;
	    	}

	    	function setData(data, map){
	    		//绘制数据源
		    	//1.生成 mapvgl 视图 View
		    	var view = new mapvgl.View({map});

		    	//2.初始化Intensity对象
		    	var intensity = new mapvgl.Intensity({
		    		min: 0,
		    		max: 100,
		    		minSize: 5,
		    		maxSize: 30,
		    		gradient: {
		    			0: 'rgba(25,66,102,0.8)',
		    			0.3: 'rgba(145,102,129,0.8)',
		    			0.7: 'rgba(210,131,137,0.8)',
		    			1:'rgba(248,177,149,0.8)'
		    		}
		    	});

		    	//3.初始化 mapvgl 的 PointLayer对象
		    	var pointLayer = new mapvgl.PointLayer({
		    		size: function(data){
		    			console.log(intensity.getSize(data.properties.sales));
		    			return intensity.getSize(data.properties.sales)
		    		},
		    		color: function(data){
		    			return intensity.getColor(data.properties.sales);
		    		}
		    	});
		    	//3.将 PointLayer 对象加入 View 中
		    	view.addLayer(pointLayer);
		    	//4.将data 与 PointLayer 进行绑定
		    	pointLayer.setData(data);
	    	}


	    </script>
	</body>
</html>
